<template>
    <div class="p-add-class">
        <page-title>添加功法</page-title>
        <div class="main"> 
            <div class="tabs text-center">
                <div class="btn">
                    <el-button :type="routeName=='addMethodText'?'primary':''" class="btn-left" @click="changeTabs('addMethodText')">添加文章</el-button>
                    <el-button  :type="routeName=='addMethodVideo'?'primary':''" @click="changeTabs('addMethodVideo')">添加视频</el-button>
                </div>
            </div>
            <router-view/>  
        </div>
    </div>
</template>

<script>
 
export default {
    data() {
        return{ 
            routeName:'addMethodText'
        }
    }, 
    watch:{
        $route(a,b){
            this.routeName=a.name;
        },
    },
    mounted() {
        
        if(this.$route.name=='addMethodText'){
            this.routeName = 'addMethodText';
        }else{ 
            this.routeName = 'addMethodVideo';
        }
    },
    methods: {
        changeTabs(val){
            this.$router.push({name:val});
        },

    }
}
</script>

<style lang="scss" scoped>
.p-add-class {
    height:100%;  
    .main{
        padding: 10px 50px; 
        background:#fff;  
        .tabs{
            margin:20px 0;
            .btn-left{
                margin-right:20px;
            }
        }
    }  
}
</style>
